<template>
    <div class="outer">
        <div class="inner">

            <div class="first_block">
                本页显示：9个
            </div>

            <div class="video_list">
                <div class="video_item" v-for="item in shipinList" :key="item.Id">

                    <div class="bg_img" :style="{background:'url('+item.UserAvatar+')'}">
                        <div class="fore_block">
                            <div class="img_top_text">{{item.RealName}}</div>
                        </div>
                    </div>

                    <div class="username">
                        <i class="iconfont icon-205yonghu_yonghu6"></i>
                        <span>抖音账号：{{item.UserName}}</span>
                    </div>
                    <div class="item_message">
                        {{item.Description}}
                    </div>

<!--                    <div class="collect_and_star">-->
<!--                        <i class="iconfont icon-jiaxingshoucang collect"></i><span class="collect_text">{{item.scnum}}</span>-->
<!--                        <i class="iconfont icon-dianzan start"></i><span class="start_text">{{item.dznum}}</span>-->
<!--                    </div>-->

                    <div class="sended_and_yuegao">
                        <div class="sended">
                            已投稿书：{{item.tgnum}}
                        </div>
<!--                        <div class="yuegao" @click.stop="yue_gao(item)">找TA约稿</div>-->
                    </div>

                </div>
            </div>

            <div class="fen_ye_qi">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        @current-change="currentChange"
                        :current-page="current_page"
                        @prev-click="prevClick"
                        @next-click="nextClick">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    import {VideoNumberList} from "../../../api/dsp/Video";
    import baseConfig from '@/utils/config.js'
    export default {
        name: "shi_pin_hao",
        data(){
            return{
                total:undefined,
                current_page:1,
                shipinList:[],
            }
        },
        mounted(){

            let data={
                page:1,
                pagesize:9
            }
            VideoNumberList(data).then(res=>{
                console.log(res)
                this.shipinList=res.data
                this.shipinList.forEach(item=>{
                    item.UserAvatar=baseConfig.dev+item.UserAvatar
                })


                //   判断总共有多少页

                if(res.total<=9){
                    this.total=10
                }else{
                    //    判断总数是否为8的整倍数
                    if((parseInt(res.total) % 9) != 0){

                        this.total=parseInt(parseInt(res.total) / 9)*10+10

                    }else{

                        this.total=parseInt(parseInt(res.total) / 9)*10

                    }

                }

            })

        },
        methods:{

            requestList(){
                let data={
                    page:this.current_page,
                    pagesize:9
                }
                VideoNumberList(data).then(res=>{
                    console.log(res)
                    this.shipinList=res.data
                    this.shipinList.forEach(item=>{
                        item.UserAvatar=baseConfig.dev+item.UserAvatar
                    })

                    //   判断总共有多少页

                    if(res.total<=9){
                        this.total=10
                    }else{
                        //    判断总数是否为8的整倍数
                        if((parseInt(res.total) % 9) != 0){

                            this.total=parseInt(parseInt(res.total) / 9)*10+10

                        }else{

                            this.total=parseInt(parseInt(res.total) / 9)*10

                        }

                    }

                })
            },
            yue_gao(item){
                console.log('作者信息为：',item)
                this.$router.push({path:'/dsp/upArticle?id=1&author=test',query:{id:item.Id,author:item.UserName}})
            },
            currentChange(res){
                this.current_page=res
                this.requestList()
            },

            prevClick(){

            },

            nextClick(){

            }
        }
    }
</script>

<style scoped>
    .outer{
        width: 100%;
        overflow: hidden;
    }
    .inner{
        width: 1000px;
        margin: 0px auto;

    }
    .first_block{
        height: 64px;
        width: 100%;

        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 64px;
    }

    .video_list{
        width: 100%;
        /*height: 1060px;*/
        min-height: 340px;
        /*max-height: 1060px;*/
        max-height: 1080px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

    }

    .video_item{
        width: 320px;
        height: 340px;
        background: #FFFFFF;
        position: relative;
        margin-bottom: 20px;
    }
    .bg_img{
        width: 100%;
        height: 170px;
        /*background-image: url("https://img0.baidu.com/it/u=568615847,3054868429&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=333");*/
        background-size: 100% 100%;
        background-repeat: no-repeat;

        border-radius: 4px 4px 0px 0px;
        cursor: pointer;
    }
    .fore_block{
        width: 100%;
        height: 170px;

        background: #000000;
        opacity: 0.66;
        border-radius: 4px 4px 0px 0px;

        display: flex;
        justify-content: center;
        align-items: center;
    }
    .img_top_text{
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
    }
    .username{
        margin-top: 20px;
        margin-left: 16px;
    }
    .username i{
        font-size: 17px;
    }
    .username span{
        margin-left: 4px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 12px;
    }
    .item_message{
        width: 275px;
        height: 12px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #A3A3A3;
        line-height: 12px;

        margin-left: 16px;
        margin-top: 14px;

        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
    .collect_and_star{
        margin-left: 16px;
        margin-top: 27px;
    }
    .collect_and_star i{
        cursor: pointer;
    }
    .collect_and_star span{
        margin-left: 5px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        line-height: 18px;
    }
    .start{
        margin-left: 22px;
    }
    .sended_and_yuegao{
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 0px;
        width:100%;
        height: 53px;
        border-top: 1px solid #E9E9E9;
        align-items: center;
    }
    .sended{
        margin-left: 16px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }
    .yuegao{
        width: 80px;
        height: 31px;
        background: rgba(46, 176, 198, 0.15);
        border: 1px solid #2EB0C6;
        border-radius: 4px;

        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #2EB0C6;
        line-height: 31px;
        text-align: center;

        margin-right: 15px;
        cursor: pointer;
    }
    .fen_ye_qi{
        min-width: 109px;
        max-width: 430px;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 26px;
        margin-bottom: 115px;
    }
</style>
